<script lang="ts" setup>
import { computed } from 'vue';

type PropsType = {
	justify?: string;
	direction?: string;
	align?: string;
	gap?: string;
	rowGap?: string;
	padding?: string;
	width?: string;
	height?: string;
	minHeight?: string;
	maxHeight?: number;
	bgColor?: string;
	wrap?: string;
	radius?: string;
};

const props = defineProps<PropsType>();

const justifyMap = {
	start: 'flex-start',
	center: 'center',
	end: 'flex-end',
	between: 'space-between',
	around: 'space-around'
};
const alignMap = {
	start: 'flex-start',
	center: 'center',
	end: 'flex-end'
};
const directionMap = {
	horizontal: 'row',
	vertical: 'column'
};

const style = computed(() => {
	const map: any = { display: 'flex' };
	if (props.wrap) {
		map.wrap = props.wrap;
	}
	if (props.bgColor) {
		map.background = props.bgColor;
	}
	if (props.direction) {
		map.flexDirection = directionMap[props.direction];
	}
	if (props.justify) {
		map.justifyContent = justifyMap[props.justify];
	}
	if (props.align) {
		map.alignItems = alignMap[props.align];
	}
	if (props.gap) {
		map.gap = props.gap;
	}
	if (props.padding) {
		map.padding = props.padding;
	}
	if (props.width) {
		map.width = props.width;
	}
	if (props.height) {
		map.height = props.height;
	}
	if (props.maxHeight) {
		map.maxHeight = props.maxHeight;
	}
	if (props.minHeight) {
		map.minHeight = props.minHeight;
	}
	if (props.radius) {
		map.borderRadius = props.radius;
	}
	return map;
});
</script>

<template>
	<view class="x-container" :style="style">
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
.x-container {
	box-sizing: border-box;
}
</style>
